<template>
  <div class="pd-body">
    <div class="search-header">
      <search
        v-model="searchValue"
        auto-scroll-to-top
        @on-focus="onFocus"
        top="43px"
        @on-cancel="onCancel"
        @on-submit="onSubmit(searchValue)"
        ref="search"></search>
    </div>


    <div class="pj-list-box">
      <scroller lock-x height="82vh" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
        <div class="box2">
          <div class="pj-items" v-for="item in productData">
            <div @click="toDetail(item.id)">
              <div class="fx-bw">
                <div class="pj-title line-2">{{ item.name }}（{{ item.fileCount }}）</div>
                <div class="pj-state ing">{{ item.fcontractstate }}</div>
              </div>
              <div class="fx-bw pj-compeny">
                <div class="pj-owner">{{ item.companyName }}</div>
                <div class="prj-id fx-bw">
                  <span>编号：{{ item.projectCode }}</span>
                </div>
              </div>
              <div class="pj-mark"> 项目简称： {{ item.simplename }}</div>

              <div class="fx-bw">
                <div class="pj-mark"> 项目类型： {{ item.projecttype }}</div>
                <div class="pj-mark"> 项目经理： {{ item.pmanger }}</div>
              </div>
              <div class="pj-mark"> 立项日期： {{ item.projectyear }}</div>

              <!--<img class="art-thumb" src="../../../static/img/demo1.png" alt="">-->

              <!-- <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
                 <thead>
                 <tr style="background-color: #F7F7F7">
                   <th>项目类型</th>
                   <th>项目经理</th>
                   <th>立项日期</th>

                 </tr>
                 </thead>
                 <tbody>
                 <tr>
                   <td>{{ item.projecttype }}</td>
                   <td>{{ item.pmanger }}</td>
                   <td>{{ item.projectyear }}</td>
                 </tr>
                 </tbody>
               </x-table>-->

              <div class="pj-progress-box">
                <!--<div class="fx-bw">
                  <div class="pj-title">项目进度</div>
                  <div class="pj-progress-num">{{ item.fcontractstate }}</div>
                </div>-->
                <!--<x-progress :percent="80" class="pj-progress-load" :show-cancel="false"></x-progress>-->
              </div>
            </div>
          </div>
          <load-more tip="loading"></load-more>
        </div>
      </scroller>

    </div>
  </div>
</template>

<script>
  import {TransferDom, Scroller, LoadMore, Popup, Search, Cell, XProgress, XTable} from 'vux'
  import {basePost} from '../../../base/request'
  import {handleLocalStorage} from '../../../base/baseApi'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Popup,
      XTable,
      Scroller,
      LoadMore,
      Search,
      XProgress,
      Cell
    },
    data () {
      return {
        productData: [],
        searchValue: '',
        show14: false,
        pageNumber: 1,
        keyWord: null
      }
    },
    mounted () {
      let _this = this
      _this.getProjuctList()
    },
    // 监听,当路由发生变化的时候执行
    /* watch: {
      $route (to, from) {
        // console.log(to.path, 'from:' + from.path)
        if (from.path === '/login') {
          location.reload()
        }
      }
    }, */
    methods: {
      /*
      * 下拉加载
      * */
      onScrollBottom () {
        if (this.onFetching) {
          // do nothing
        } else {
          this.onFetching = true
          setTimeout(() => {
            this.pageNumber += 1
            this.getProjuctList({pageNumber: this.pageNumber})
            this.$nextTick(() => {
              this.$refs.scrollerBottom.reset()
            })
            this.onFetching = false
          }, 2000)
        }
      },

      /*
      * 获取文件列表
      * */
      async getProjuctList (params = {}) {
        let _this = this
        let {str, pageNumber} = params
        if (_this.keyWord) {
          str = _this.keyWord
        }
        let userName = _this.$route.query.userId
        handleLocalStorage('set', 'userName', userName)
        if (userName) {
          let baseUrl = 'http://' + window.location.host
          if (process.env.NODE_ENV === 'development') {
            baseUrl = baseUrl + '/api/'
          } else {
            baseUrl = 'http://' + window.location.host
          }
          let userName = handleLocalStorage('get', 'userName')
          basePost(`${baseUrl}/material/oauth/check_ssotoken`, {
            ssotoken: '111',
            ssoid: '111',
            account: userName
          }, (res) => {
            console.log(res)
            if (res.token) {
              _this.token = res.token
              basePost(`${baseUrl}/material/project/getlistbyuserid`, {
                token: res.token,
                filterStr: str,
                pageNumber
              }, (ret) => {
                console.log(ret)
                _this.productData.push(...ret.list)
              })
              handleLocalStorage('set', 'token', res.token)
            }
          })
        } else {
          alert('token出错')
        }
      },
      /*
      * 搜索文件
      * */
      onSubmit (keyWord) {
        this.$refs.search.setBlur()
        console.log(keyWord)
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset({
            top: 0
          })
        })
        if (keyWord) {
          this.keyWord = keyWord
          this.productData = []
          this.getProjuctList({str: this.keyWord})
        } else {
          this.keyWord = null
          this.productData = []
          this.getProjuctList()
        }
        /* this.$vux.toast.show({
          type: 'text',
          position: 'top',
          text: 'on submit'
        }) */
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      },
      toDetail (id) {
        this.$router.push({
          path: '/project-detail',
          query: {
            id
          }
        })
      }
    }
  }
</script>

<style scoped>
  .prj-id h3 {
    color: #000;
  }

  .pj-compeny {
    margin: 5px 0;
  }

  .prj-id {
    color: #666;
    font-size: 12px;
  }

  .pj-list-box {
    padding-top: 100px;
  }

  .search-header {
    position: fixed;
    left: 0;
    z-index: 99;
    top: 43px;
    width: 100%;
  }

  .art-thumb {
    width: 100%;
    max-height: 180px;
    border-radius: 5px;
    margin: 10px auto;
  }

  .pj-progress-load {
    margin-top: 5px;
  }

  .pj-progress-box {
    margin-top: 15px;
  }

  .pj-progress-num {
    color: #04be02;
    font-weight: 600;
  }

  .pj-src {
    color: #666;
    font-size: 12px;
    display: block;
    margin-top: -3px;
  }

  .pj-mark {
    color: #666;
    font-size: 12px;
  }

  .pj-owner {
    font-size: 10px;
    color: #04be02;
  }

  .pj-title {
    font-size: 14px;
  }

  .pj-state.ing {
    background: #04be02;
  }

  .pj-state {
    font-size: 10px;
    color: #fff;
    height: 16px;
    border-radius: 3px;
    line-height: 16px;
    padding: 0 3px;
    width: fit-content;
    min-width: 60px;
    text-align: center;
  }

  .pj-items {
    padding: 15px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;

  }

  .pd-body {
    min-height: 100vh;
    padding: 0 15px;
  }
</style>
